* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  li {
    list-style: none;
  }
  @font-face {
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
  }
 #mycentent {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    /*  背景图定位 / 背景图尺寸  cover 完全铺满容器  contain 完整显示在容器内 */
    background: url(../images/shouye/lvbacground.jpeg) no-repeat;
    background-size: cover;
    /* 行高是字体1.15倍 */
    line-height: 1.15;
  }
  #mymodalcolor{
    //   background-color: rgba(253, 249, 249, 0.4);
    label{
        display: inline-block;
        width: 100px;
    }
}
  header {
    position: relative;
    // top:50px;
    height: 1.25rem;
    background: url(../images/shouye/head_bg.png) no-repeat top center;
    background-size: 100% 100%;
    .showTime {
      position: absolute;
      top: 0;
      left: 0.375rem;
      line-height: 0.9375rem;
      font-size: 0.25rem;
      color: rgba(255, 255, 255, 0.7);
    }
    .querytext{
        position: absolute;
        // height: 60px;
        padding: 10px 0;
        line-height: 30px;
        top: 0;
        right: 0.375rem;
        font-size: 0.25rem;
       
        input{
            height: 30px;
            width: 200px;
            border-radius: 5px;
            // border-style: none;
            border:1px solid black ;
            outline: none;
        }
        span{
            font-size: 18px;
            color: rgb(255, 255, 255);
        }
        .mysubmit{
            // height: 30px;
            width: 70px;
            // border-radius: 5px;
            margin: 0 20px;
            position: relative;
            border-style: none;
            color: white;
            font-weight: 900;
            background-color: #5CB9A4;
        }
        .btn{
            width: 70px;
            height: 30px;
            color: white;
            font-weight: 900;
            background-color: #5CB9A4;
            border-radius: 0;
            padding: 0 10px;
            font-size: 15px;
            border: 1px solid #5CB9A4;
            // outline: none;
        }
    }
  }
  .mainbox {
    min-width: 1024px;
    max-width: 1920px;
    padding: 0.125rem 0.125rem 0;
    display: flex;
    .column {
      flex: 3;
      &:nth-child(1) {
        flex: 5;
        margin: 0 0.125rem 0.1875rem;
        overflow: hidden;
      }
    }

//   .aa{
//     position: relative;
//     height: 10.125rem;
//   }
  .panel {
    position: relative;
    height: 4.175rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: rgba(255, 255, 255, 0.04) url(../images/shouye/line\(1\).png);
    padding: 0 0.1875rem 0.5rem;
    margin-bottom: 0.4875rem;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-top: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
    h1{
     height: 0.6rem;
      line-height: 0.6rem;
      text-align: center;
      color: #fff;
      font-size: 0.3rem;
      font-weight: 400;
    }
    h2 {
      height: 0.25rem;
      line-height: 0.4rem;
      text-align: center;
      color: #fff;
      font-size: 0.25rem;
      font-weight: 400;
    }
    .chart {
      height: 3rem;
    }
  }
}
.map {
  position: relative;
  height: 10.125rem;

  .map1{
    width: 6.475rem;
    height: 6.475rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../images/shouye/map.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0.3;
  }
  .map2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8.0375rem;
    height: 8.0375rem;
    // background: url(../images/shouye/lbx.png);
    animation: rotate1 15s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
  }
  .map3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.075rem;
    height: 7.075rem;
    // background: url(../images/shouye/jt.png);
    animation: rotate2 10s linear infinite;
    opacity: 0.6;
    background-size: 100% 100%;
  }
  .chart {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    height: 10.125rem;
    width: 100%;
  }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  @keyframes rotate1 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }
}

  
  @media screen and (max-width: 1024px) {
    html {
      font-size: 42px !important;
    }
  }
  @media screen and (min-width: 1920) {
    html {
      font-size: 80px !important;
    }
  }
  .btnclick{
    background-color: #8feed8;
  }
  .modalbody{
    background: #F0F2F5;
  }
  #myresore{
    background: #000;
    #myresorecent{
      width: 95%;
      
    }
    .modalbody{
      //  background: #8f9192;
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      padding: 30px 0 90px 0;
      .card{
        position: relative;
        max-width: 21%;
        height: 190px;
        margin: 30px 10px;
        padding: 15px 15px;
        background: #fff;
        display: flex;
        flex-direction: column;
        // box-shadow: 0 5px 202px rgba(0, 0, 0, 0.5);
        transition: 0.3s linear;
        &:hover{
          height: 400px;
        }
        .imgBox{
          position: relative;
          width: 100%;
          text-align: center;
          top:-60px;
          // height: 260px;
          // display: flex;
          // justify-content: center;
          // align-items: center;
          // padding: 0 20px;
          
          img{
       border-radius: 4px;
        max-width: 100%;
        }
        span{
          // display: block;
          // margin-bottom: 15px;
          margin: 20px 0;
          font-size: 25px;
        }
        }
        .content{
          position: relative;
          margin-top: -100px;
          padding: 10px 15px;
          // text-align: center;
          visibility: hidden;
          opacity: 0;
          transition: 0.3s linear;
        }
        &:hover .content{
          visibility: visible;
          opacity: 1;
          margin-top: -80px;
          transition: 0.3s linear;
        }
      }
      span{
        display: inline-block;
        // margin: 0 5px;
        font-size: 25px;
        color: rgb(90, 89, 89);
      }
      
    }
  }
  